<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看物流"
             width="50%" v-loading="loading">
    <div class="title">
      快递：<span style="margin-right: 30px">{{logisticsData ? logisticsData['shipperName'] : ''}}</span>
      运单号：<span>{{logisticsData ? logisticsData['logisticNumber'] : ''}}</span>
    </div>
    <div class="content">
      <el-timeline :reverse="true">
        <el-timeline-item v-for="(item, index) in logisticsData['traces']" :key="index"
                          :timestamp="item['time']" placement="top"
                          :type="index === logisticsData['traces'].length - 1 ? 'success' : 'info'">
          {{item['desc']}}
        </el-timeline-item>
      </el-timeline>
    </div>
    <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
      </span>
  </el-dialog>
</template>

<script>
import { queryTranceByOrderIdStore } from '@/api/ApiGoodDeliver'
import { ResultCode } from '@/constants/constants'

export default {
  name: 'LogisticsDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    orderId: {
      required: true,
      type: [String, Number]
    },
    data: {
      required: false,
      type: Object,
      default: null
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      dialogVisible: false,
      queryLoading: false,
      logisticsData: {
        shipperName: '',
        logisticNumber: '',
        traces: []
      }
    }
  },
  computed: {
    loading () {
      return this.queryLoading
    }
  },
  methods: {
    /**
     * 关闭对话框
     */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
     * 刷新物流信息
     */
    freshData () {
      if (!this.orderId || this.orderId <= 0) {
        this.logisticsData = []
        return
      }
      if (this.data) {
        this.logisticsData = this.data
        return
      }
      this.queryLoading = true
      queryTranceByOrderIdStore(this.orderId, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.logisticsData = data
        }
      }, () => {
        this.queryLoading = false
      })
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    },
    orderId () {
      this.freshData()
    }
  }
}
</script>

<style scoped>

  .title{
    padding: 4px 60px;
    font-weight: 500;
  }

  .content{
    padding: 30px 60px;
  }

</style>
